<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>bootstrap 初体验</title>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
  </head>
  <body>
    <div class="container">
      
      <div class="col-lg-4 col-lg-offset-4">
        <h2>登录</h2>
        <hr>
        <form>
          <div class="form-group ">
            <label class="control-label" for="exampleInputEmail1">邮箱</label>
            <input
              type="email"
              class="form-control"
              id="exampleInputEmail1"
              placeholder="邮箱"
            />
            <span id="helpBlock2" class="help-block hidden">邮箱已经被使用</span>
          </div>
          <div class="form-group">
            <label for="exampleInputPassword1">密码</label>
            <input
              type="password"
              class="form-control"
              id="exampleInputPassword1"
              placeholder="密码"
            />
          </div>
          <div class="checkbox">
            <label> <input type="checkbox" /> 记住我</label>
          </div>
          <button type="submit" class="btn btn-default btn-block btn-primary">登录</button>
        </form>
      </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
    <script>
      //获取 email 元素
      let email = document.querySelector('input[type=email]');

      //绑定事件
      email.onblur = function(){
        //为父级节点添加 has-error 类名
        this.parentNode.classList.add('has-error');
        //将下一个同辈元素的 hidde 类移除
        this.nextElementSibling.classList.remove('hidden');
      }

    </script>
  </body>
</html>
